.filter-panel-wrapper {
    height: 100%;
    overflow: hidden;
}

.filter-panel-container {
    width: 224px;
    height: 100%;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    .panel-header {
        display: flex;
        padding: 12px 12px 12px 16px;
        justify-content: space-between;
        align-items: center;
        // border-bottom: 1px solid #eaecf3;
        .header-title {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            font-size: 12px;
            line-height: 16px;
        }
        .panel-header-icon {
            color: var(--Colors-Use-Neutral-Text-1-Title);
            width: 16px;
            height: 16px;
            svg {
                width: 16px;
                height: 16px;
            }
            &:hover {
                color: var(--Colors-Use-Main-Hover);
            }
            path {
                stroke-width: 1.5;
            }
        }
    }
    .panel-content {
        flex: 1 0 0;
        overflow: hidden;
        .content-body {
            width: 100%;
            height: 100%;
            overflow: hidden auto;
            .content-collapse {
                width: 100%;
                // padding-left: 4px;
                :global {
                    .ant-collapse-content-box {
                        padding: 0 4px 12px !important;
                    }
                    .ant-collapse-item .ant-collapse-header{
                        padding-left: 10px;
                        padding-right: 10px;
                    }
                }
                .clear-btn {
                    padding-right: 4px;
                }
                .list-item {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-radius: 4px;
                    padding: 6px 12px 8px 6px;
                    cursor: pointer;
                    &:hover {
                        background-color: #f0f1f3;
                    }
                    .list-item-left {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        overflow: hidden;
                        margin-right: 12px;
                        padding-left: 2px;
                        line-height: 16px;
                        .item-title {
                            max-width: 120px;
                            overflow: hidden;
                            color: var(--Colors-Use-Neutral-Text-1-Title);
                            font-size: 12px;
                            line-height: 16px;
                        }
                    }
                    .list-item-extra {
                        color: #b4bbca;
                        text-align: right;
                        font-size: 12px;
                        line-height: 16px;
                    }
                }
                .list-item-active {
                    color: var(--Colors-Use-Main-Primary);
                    .list-item-left {
                        .item-title {
                            color: var(--Colors-Use-Main-Primary);
                        }
                    }
                    .list-item-extra {
                        color: var(--Colors-Use-Main-Primary);
                    }
                }
            }
            .to-end {
                text-align: center;
                color: var(--Colors-Use-Neutral-Disable);
                font-size: 11px;
                padding-top: 12px;
                padding-bottom: 24px;
            }
        }
    }
}
